<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>搜索账单</title>
    <script src="../js/flexible.js"></script>
    <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>

    <script src="http://121.37.252.168:8080/api/static/dexie.js"></script>
    <script src="http://121.37.252.168:8080/api/static/indexdb.js"></script>

    <link rel="stylesheet" href="../css_sass/base.css" />
    <link rel="stylesheet" href="../css_sass/searchBill.css" />
  </head>

  <body>
    <header>
      <div class="header">
        <img src="../img/goback.png" id="return" />
        <span>搜索账单</span>
      </div>
    </header>
    <div class="selectBox">
      <div class="time">
        <span id="selectTime">今年</span>
        <img src="../img/down.png" class="selectTime" />
      </div>
      <div class="condition">
        <span id="selectCondition">筛选</span>
        <img src="../img/down.png" class="selectCondition" />
      </div>
    </div>
    <input type="text" placeholder="输入关键字(配备分类和备注)" id="search" />
    <span class="display"> </span>

    <!-- 遮罩层 -->
    <div class="mask"></div>
    <ul class="timeBox">
      <!-- <ul> -->
      <li class="group">
        <span>分组方式</span>
        <ul>
          <li id="noGroup" class="active">不分组</li>
          <li id="groupByDay">按天</li>
          <li id="groupByMonth">按月</li>
        </ul>
      </li>
      <li class="bill">
        <span>账单时间</span>
        <ul>
          <li id="thisMonth">本月</li>
          <li id="lastMonth">上月</li>
          <li id="thisYear" class="active">今年</li>
          <li id="lastYear">去年</li>
        </ul>
        <ul>
          <li id="range">2022-2023</li>
          <li id="all">全部</li>
        </ul>
      </li>
      <li class="date">
        <span>自定义日期</span>
        <div>
          <span class="startTime">开始日期</span>
          <span class="line">-</span>
          <span class="endTime">结束日期</span>
          <span class="ok">确定</span>
        </div>
      </li>
    </ul>
    <div class="conditionBox">
      <div>
        <span class="range">金额范围</span>
        <div>
          <input type="text" placeholder="最小" id="min" />
          <span class="line">-</span>
          <input type="text" placeholder="最大" id="max" />
        </div>
      </div>
      <div class="kind">
        <span>账单类型</span>
        <ul>
          <li class="active">全部</li>
          <li>支出</li>
          <li>收入</li>
          <li>报销</li>
        </ul>
      </div>
      <span>
        <button class="reset">重置</button>
        <button class="confirm">确定</button>
      </span>
    </div>
    <div class="calendarBox">
      <div class="top">
        <p>请选择日期</p>
        <span class="exactDate">
          <span class="exactYear"></span>年 <span class="exactMonth"></span>月 <span class="exactDay"></span>日
        </span>
      </div>
      <div class="bottom">
        <div class="head">
          <span class="left">
            <p id="date"><span class="year"></span>年 <span class="month"></span>月</p>
            <!-- <img src="../img/箭头下-黑.png" id="down"> -->
            <select id="down"></select>
          </span>
          <span class="right">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
          </span>
        </div>
        <div class="content">
          <div class="whichDay">
            <div>日</div>
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
          </div>
          <div class="calendar">
            <!-- <div class="item">1</div> -->
          </div>
          <div class="operation">
            <span class="cancel">取消</span>
            <span class="sure">确定</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="selectYears">
        
    </div> -->
    <script src="../js/searchBill.js"></script>
    <!-- <script src="../js/db.js"></script> -->
  </body>
</html>
